@primary-color: #247ce5;
@notice-color: #5d9bf8;
@info-color: #00d7e4;
@success-color: #19e286;
@error-color: #f13232;
@warning-color: #ffc871;
@normal-color: #a7c8ed;
@link-color: #2784d7;
@white: #fff;
@black: #000;

::placeholder {
  color: #5076b4;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: none;
  font-size: 14px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

* {
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

p {
  margin-bottom: 0;
}

input,
textarea {
  outline: 0;
  resize: none;
}

/* 浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.float-fixed:after {
  content: "";
  clear: both;
  display: block;
}

/*颜色*/
.color {
  &-white {
    color: @white  !important;
  }

  &-black {
    color: @black  !important;
  }

  &-success {
    color: @success-color  !important;
  }

  &-warning {
    color: @warning-color  !important;
  }

  &-error {
    color: @error-color  !important;
  }

  &-primary {
    color: @primary-color  !important;
  }

  &-notice {
    color: @notice-color  !important;
  }

  &-normal {
    color: @normal-color  !important;
  }

  &-link {
    color: @link-color  !important;
  }

  &-disabled {
    color: #ccc !important;
  }
}

/*背景色*/
.bg {
  &-white {
    background-color: @white  !important;
  }

  &-black {
    background-color: @black  !important;
  }

  &-success {
    background-color: @success-color  !important;
  }

  &-warning {
    background-color: @warning-color  !important;
  }

  &-error {
    background-color: @error-color  !important;
  }

  &-primary {
    background-color: @primary-color  !important;
  }
}

/* 定位方式 */
.pos {
  &-rel {
    position: relative;
  }

  &-abs {
    position: absolute;
  }

  &-fix {
    position: fixed;
  }

  &-sta {
    position: static;
  }
}

/* 文字相关 */
.text {
  &-center {
    text-align: center;
  }

  &-left {
    text-align: left;
  }

  &-right {
    text-align: right;
  }

  &-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 鼠标样式 */
.cursor {
  &-pointer {
    cursor: pointer;
    user-select: none;
  }

  &-default {
    cursor: default;
  }

  &-move {
    cursor: move;
  }
}

/* flex */
.flex {
  &-box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*
      主轴的对齐方式
      ┌──────────────────┐
      |    ▇ ▇ ▇ ▇    |
      └──────────────────┘
    */
    align-items: center;

    /*
      交叉轴的对齐方式
      ┌──────────────────┐
      |    ▇ ■ - █ -    |
      └──────────────────┘
    */
    &.hide {
      display: none;
    }

    &>.flex-auto {
      width: 1px;
      overflow: auto;
    }
  }

  &-item {
    flex: 1;
  }

  &-column {
    flex-direction: column;

    &>* {
      width: 100%;
    }

    &>.flex-auto {
      width: 100%;
      // height: 1px;
      overflow: auto;
    }
  }

  &-start {
    justify-content: flex-start;
  }

  &-top {
    align-items: flex-start;
  }

  &-end {
    align-items: flex-end;
  }

  &-between {
    justify-content: space-between;
  }

  &-around {
    justify-content: space-around;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-1 {
    flex: 1;
  }
}

.title {
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  line-height: 28px;
  padding: 0 10px;

  &:before,
  &:after {
    content: "";
    border-left: 1px solid #2788c5;
    width: 5px;
  }

  &:before {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    margin-right: 10px;
    border-top: 1px solid #2788c5;
    border-bottom: 1px solid #2788c5;
  }

  &:after {
    margin-left: 10px;
  }
}

.title-one {
  position: relative;
  display: block;
  width: fit-content;
  background: #041e41;
  line-height: 34px;
  box-sizing: border-box;
  font-weight: bold;
  color: rgba(167, 200, 237, 1);
  padding: 0 5px;
  margin-top: 16px;

  &::before {
    content: " ";
    position: absolute;
    left: -5px;
    top: 10px;
    display: inline-block;
    width: 3px;
    height: 15px;
    background: linear-gradient(180deg,
        rgba(0, 136, 255, 1) 0%,
        rgba(0, 136, 255, 0) 100%);
  }

  &::after {
    content: " ";
    width: 0;
    height: 0;
    position: absolute;
    right: -34px;
    border-right: 34px solid transparent;
    border-bottom: 34px solid #041e41;
  }
}

.zoom-in {
  animation: zoomIn 0.3s both;
}

@keyframes zoomIn {
  0% {
    transform: scale(0, 0);
    opacity: 0;
  }
}

.margin {
  &-xs {
    margin: 5px;
  }

  &-sm {
    margin: 10px;
  }

  &-md {
    margin: 15px;
  }

  &-lg {
    margin: 20px;
  }
}

@media screen and (max-width: 576px) {
  .xs-hidden {
    display: none !important;
  }
}